<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.page{
				width: 200px;
				height: 200px;
				background: skyblue;
				display: none;
			}
			.active{
				display: block;
			}
		</style>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- <div class="page"></div> -->
			<!-- 通过对象的方式决定是否存在某个类 -->
			<div class="page" :class="{active:isTrue}"></div>
			<!-- 直接放置对象 -->
			<div class="page" :class="styleObj"></div>
			<!-- 放置数组 -->
			<div class="page" :class="styleArr"></div>
			<!-- 放置字符串 -->
			<div class="page" :class="styleStr"></div>
			<!-- 数组和对象混合和使用 -->
			<div class="page" :class="styleArrObj"></div>
		</div>
		<script type="text/javascript">
				
			var app = new Vue({
				el:"#app",
				data:{
					isTrue:true,
					styleObj:{active:true,laochen:true,"col-lg-6":true},
					// 可直接用数组的方式进行添加和删除
					styleArr:['col-xs-12','red-bg'],
					styleStr:"abc cba qwer",
					styleArrObj:['abc',{active:false}]
				},
				
				
			})
		</script>
	</body>
</html>
